<template>
  <div>
    <router-view></router-view>
    <div class="topwraper">
      <h4>退款商品</h4>
      <van-card desc="描述信息" title="商品标题" class="goods-card" thumb="https://img01.yzcdn.cn/vant/cat.jpeg" />
    </div>

    <van-cell title="货物状态" is-link :value="statecontent" @click="shopstate" />
    <van-cell title="退款原因" is-link :value="reasoncontent" @click='shopreason' />
    <van-cell>
      <template #title>
        <span class="custom-title">退款金额:</span>
        <span class="returnprice">￥{{ returnvalue }}</span>
      </template>
    </van-cell>
    <van-field v-model="text" label="退款说明:" placeholder="选填" />
    <van-card title="上传凭证">
      <template #desc>
        <van-uploader v-model="fileList" multiple />
      </template>
    </van-card>
    <van-button type="danger" @click="$router.push('/refund')" block>提交</van-button>
    <div class="shopstate" ref="shopstate">
      <h4>货物状态</h4>
      <van-radio-group v-model="radio1">
        <van-radio v-for="(item,index) in statechoice" :key="index" :name="index">{{item}}</van-radio>
      </van-radio-group>
      <van-button type="warning" block @click="stateisok">确定</van-button>
    </div>
    <div class="returnreason" ref="returnreason">
      <h4>退款原因</h4>
      <van-radio-group v-model="radio2">
        <van-radio v-for="(item,index) in reasonchoice" :key="index" :name="index">{{item}}</van-radio>
      </van-radio-group>
      <van-button type="warning" block @click="reasonisok">确定</van-button>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      returnvalue: '12',
      statecontent:'请选择',
      reasoncontent:'请选择',
      reasonchoice:['不喜欢/不想要','空包裹','未按照约定时间发货','物流一直未送到','货物破损','其他原因'],
      statechoice:['未收到货物','已收到货物'],
      text: '',
      radio1: '',
      radio2: '',
      fileList: [
      ],
    };
  },
  methods: {
    shopstate() {
      let state = this.$refs.shopstate
      state.style.display = 'block'
    },
    stateisok() {
      let state = this.$refs.shopstate
      state.style.display = 'none'
      let content=this.statechoice[this.radio1]
      this.statecontent=content
    },
    shopreason() {
      let reason = this.$refs.returnreason
      reason.style.display = 'block'
    },
    reasonisok() {
      let reason = this.$refs.returnreason
      reason.style.display = 'none'
       let content1=this.reasonchoice[this.radio2]
      this.reasoncontent=content1
    }
  },
};
</script>

<style scoped>
.van-button {
  position: fixed;
  bottom: 0;
}

.wraper {
  background: #F2F2F2;
}

.topwraper {
  background: white;
}

.topwraper h4 {
  margin: 15px;
}

.returnprice {
  font-size: 16px;
  color: rgb(229, 23, 23);
}

.van-cell {
  margin-top: 10px;
}

.shopstate {
  background: rgb(236, 236, 236);

  position: fixed;
  bottom: 0;
  width: 100%;
  height: 250px;
  z-index: 99;
  display: none;
}

.shopstate h4 {
  padding: 10px;
  text-align: center;
}

.shopstate .van-radio {
  padding: 10px;
}

.returnreason {
  background: rgb(236, 236, 236);
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 380px;
  z-index: 99;
  display: none;
}

.returnreason h4 {
  padding: 10px;
  text-align: center;
}

.returnreason .van-radio {
  padding: 10px;
}
</style>
